以编程方式将 HTML 标签角括号更改为 `<` 文本字符

Question

我需要将一些 HTML 转换为文本并将 HTML 标记显示为代码，换句话说，有一个带有尖括号的 <div> 显示并在屏幕上显示为 <div>。我知道要做到这一点，我必须将尖括号切换为 < 和 >

有没有用 JavaScript 以编程方式执行此操作？我在下面包含了一些伪代码，如果它是一个字符串，你将如何做到这一点，但我需要了解如何将 HTML 标记转换为字符串？

Codepen：https://codepen.io/emilychews/pen/KKpqoww

// PSEUDO CODE

var codeHTML = document.getElementsByClassName('code-html')

for (var i = 0; i < codeHTML.length; i+=1) {

    codeHTML[i].replace('<', '&lt;')
}

<code class="code-html"><div></code>
Hi
<code class="code-html"></div></code>

Answer 1

尝试使用 element.innerHTML 获取内容并使用 element.innerText 或通过 element.textContent 将这些值分配给元素。现在您想要的标签将被转换为字符串。

Answer 2

也许是这样？

document.querySelectorAll('.code-html').forEach(codeHTML=>{
  codeHTML.innerHTML = codeHTML.innerHTML.replace(/</g,'&lt;')
})

.code-html {
    display: block;
    background-color:lightblue;
    white-space: pre;
  }

<code class="code-html"><div> 
    Hi
</div>
</code>
<br>
<h5>another example to show preservation of indentation (partial copy of Bootstrap code)</h5>
<code class="code-html"><div class="container">
  <div class="card-deck mb-3 text-center">
    <div class="card mb-4 shadow-sm">
      <div class="card-header">
        <h4 class="my-0 font-weight-normal">Free</h4>
      </div>
      <div class="card-body">
        <h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
        <ul class="list-unstyled mt-3 mb-4">
          <li>10 users included</li>
          <li>Help center access</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button>
      </div>
    </div>
    <div class="card mb-4 shadow-sm">
      <div class="card-header">
        <h4 class="my-0 font-weight-normal">Enterprise</h4>
      </div>
      <div class="card-body">
        <h1 class="card-title pricing-card-title">$29 <small class="text-muted">/ mo</small></h1>
        <ul class="list-unstyled mt-3 mb-4">
          <li>30 users included</li>
          <li>Help center access</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block btn-primary">Contact us</button>
      </div>
    </div>
  </div>
</div>
</code>
<br>
<h5>other example with CSS code and elastic-tabstops preservation</h5>
<code class="code-html">.code-html {
  display          : block;
  background-color : lightblue;
  white-space      : pre;
}
</code>

备注：
- element.textContent = element.innerHTML 不尊重换行符。
- element.innerText = element.innerHTML 工作得几乎很好，但是当它有换行符并且它不尊重用于缩进代码的空格时，它会添加 <br>，如果你想为用户保留复制和粘贴，这可能是一个问题. （我使用 css white-space: pre; 来尊重换行符和缩进空格）

Answer 3

我认为使用 HTML 字符串设置 .innerText 是您正在寻找的。您可以使用.innerHTML 获取此字符串。使用（未经处理的）用户输入时，设置.innerText 是最安全的选项。

document.getElementById('output').innerText = document.getElementById('input').innerHTML;

<div id=input><span>This is a test</span></div>
<div id=output></div>

以下代码只是为了完整性：

document.querySelectorAll('.code-html').forEach(e => {
  e.innerText = e.innerHTML;
});

.code-html {
  display: inline-block;
  border: 1px solid #888;
  margin: 10px;
  padding: 5px;
  white-space: pre;
}

<code class="code-html"><div>
Test 1
Test  2
Test 3
</div></code>
Hi
<code class="code-html"><div>
Test 4
 Test 5
Test 6
</div></code>

值得注意：

“如果您的项目将接受任何形式的安全审查，那么使用 innerHTML 很可能会导致您的代码被拒绝。例如，如果您在浏览器扩展中使用 innerHTML 并将扩展提交到 addons.mozilla。 org，它不会通过自动审查过程。” - https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

Answer 4

答案可以用 1 个词“ELEMENT.outerHTML”来回答 我所做的是获取元素，然后选择其 outerHTML 术语，并将其值声明为您的替换函数返回的值

不过我对< 如何显示 html 代码非常感兴趣，这太疯狂了，如果您有更多 JavaScript 逻辑问题，请联系我

//CODE

var codeHTML = document.getElementsByClassName('code-html');

for (var i = 0; i < codeHTML.length; i+=1) { //all changed code is in this loop
    codeHTML[i].outerHTML = codeHTML[i].outerHTML.replace('<', '&lt;'); //done
}

<code class="code-html"><div></code>
Hi
<code class="code-html"></div></code>