Question

我有一个字符串myString="<pre class='ql-syntax'><code><html><body>Will this work?</body></html></code></pre>"，需要在网页中呈现，以便对<code>块内的内容进行编码，使其按原样显示。

$('<div/>').html(htmlString).html()删除html和body代码并输出以下内容：

<pre class="ql-syntax"><code>Will this work?</code></pre>

我想要的输出是：

<pre class="ql-syntax"><code><html>hello</html></code></pre>

因此，在网页上，代码块内的整个内容都会呈现。

如何仅编码<code>块之间的myString部分？

我从数据库中获取myString，因此我无法控制如何构造myString。我可以操纵它但是我想确保代码块中的html按原样呈现。

Answer 1

我建议你只想要

 <code><html><body>Will this work?</body></html></code>

要被放到前面。你做一个预占位符会更好。不只是找到它并设置innerHtml。例如：

<pre class="ql-syntax" id="code"></pre>

var pre = document.getElementById("code");
var codeLength = '<code>'.length;
var start = htmlString.indexOf('<code>');
var stop = htmlString.indexOf('</code>');
if (start != -1 && stop != -1 && stop > start)
    pre.innerHtml = htmlString.substring(start+codeLength, stop-start-codeLength);

Answer 2

如果我理解您的问题，您需要对<code>标记内的字符串进行HTML编码。见HTML-encoding lost when attribute read from input field

我不确定你是如何构建字符串的，但链接帖子中的代码应该让你开始。也许是这样的：

var newstring = "<pre class="ql-syntax">" + htmlEncode("<code><html><body>Will this work?</body></html></code>") + "</pre>";

这有帮助吗？

Answer 3

您可以使用String.prototype.match()与RegExp /(<pre?\s.+?>)|(<code>)|[^\1].+(?=<\/code>)/g匹配"<pre"，后跟空格字符，后跟一个或多个字符，后跟">"或{{1或者不是先前的捕获组"<code>"后跟一个或多个字符，后跟"<code>"。

创建"</code>"元素并附加到<div>，在document.body返回的数组上调用.shift()以获取.match()，设置"<pre>" {{ 1}} div的结果;致电.innerHTML以获取.shift()匹配，设为.shift() "<code>"：.innerHTML，致电div.firstChild，将结果设为<pre> .shift()：.textContent。

＆＃13;

div.firstChild.firstChild

＆＃13;

<code>

＆＃13;

如何只编码此字符串的一部分并呈现html

3 个答案: