Программно изменить угловую скобку HTML Tags на `<` Текстовый символ

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.inner HTML и назначьте эти значения элементам, используя 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

Я думаю, что установка .innerText с помощью строки HTML - это то, что вы ищете. Вы можете получить эту строку с помощью .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>

Стоит отметить:

"Если ваш проект под go любой формы проверки безопасности, использование внутреннего HTML, скорее всего, приведет к отклонению вашего кода. Например, если вы используете внутренний HTML в расширении браузера и отправляете расширение на addons.mozilla.org, оно не пройдет автоматизированный обзор процесса." - https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

Answer 4

На ответ можно ответить в 1 термине, "ELEMENT.outer HTML". Что я делаю, так это то, что я получаю элемент, затем выбираю его внешний HTML термин и объявляю его значение значением вашей функции замены возвращает

Однако меня очень интересует, как < показывает код html, это безумие, звоните мне, если у вас есть еще JavaScript logi c вопросов

//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>