Question

我希望将文本呈现为常见的HTML并解析应该输出的[code]标记的出现次数 - 标记保持不变。

因此，这样的输入会得到相应的处理：

<p>render as HTML here</p>
[code]<p>keep tags visible here</p>[/code]
<p>more unescaped text</p>

我已经对所有代码标记进行了正则表达，但我不知道如何在之后正确设置元素的文本。如果我使用jQuery的 text（）方法，则没有任何内容被转义，如果我使用 html（）方法设置它，一切都会被呈现，我什么也得不到。谁能在这里给我一个提示？

Answer 1

尝试将[code]替换为<xmp>，将[/code]替换为</xmp>，使用正则表达式或类似方法，然后使用jQuery html()函数。

请注意，HTML5中<xmp>在技术上已弃用，但它似乎仍适用于大多数浏览器。有关详细信息，请参阅How to display raw html code in PRE or something like it but without escaping it。

Answer 2

您可以分别用[code]和[/code]标记替换<pre>和</pre>标记，然后替换<中的<pre>标签由＆amp; LT;
基于Javascript的程序化解决方案如下

function myfunction(){
  //the string 's' probably would be passed as a parameter

  var s = "<p>render as HTML here</p>\
  [code]<p>keep tags visible here</p>[/code]\
  <p>more unescaped text</p>";

  //keep everything before [code] as it is
  var pre = s.substring(0, s.indexOf('[code]'));

  //replace < within code-tags by &lt;
  pre += s.substring(s.indexOf('[code]'), s.indexOf('[/code]'))
           .replace(new RegExp('<', 'g'),'&lt;');

  //concatenate the remaining text
  pre += s.substring(s.indexOf('[/code]'), s.length);

  pre = pre.replace('[code]', '<pre>');
  pre = pre.replace('[/code]', '</pre>');

  //pre can be set as some element's innerHTML
  return pre;
}

Answer 3

我会完全推荐Andreas之前接受的答案，因为<xmp>标记已被弃用且浏览器支持完全不可靠

分别用[code]和[/code]标记替换<pre>和</pre>标记要好得多，如raghav710所示。

将<字符替换为<，他也是对的，但实际上并不是你应该替换的唯一字符。实际上，您应该将HTML中的特殊字符替换为相应的HTML实体。

以下是如何使用相应的HTML实体替换字符：

var chr = ['&#', chr.charCodeAt(), ';'].join('');

Answer 4

您可以使用占位符元素替换[code]...[/code]。然后$.parseHTML()带有占位符的字符串。然后，您可以使用.text()将代码插入占位符。然后可以将整个内容插入到文档中（在下面运行或in JSFiddle）。

＆＃13;

var str = "<div><b>parsed</b>[code]<b>not parsed</b>[/code]</div>";
var placeholder = "<div id='code-placeholder-1' style='background-color: gray'></div>";
var codepat = /\[code\](.*)\[\/code\]/;
var code = codepat.exec(str)[1];
var s = str.replace(codepat, placeholder);
s = $.parseHTML(s);
$(s).find("#code-placeholder-1").text(code);
$("#blah").html(s);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Text
<div id="blah">place holder</div>
Around

＆＃13;

如果您有多个[code]块，上面的代码需要进行一些修改，您需要为每个代码块生成一个唯一的占位符ID。

如果您可能插入不受信任的结构代码，强烈建议使用大型随机数作为占位符ID，以防止恶意用户劫持占位符ID。

如何仅将字符串的一部分呈现为HTML

4 个答案: