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

I want to render a text as common HTML and parse occurrences of [code] tags that should be output unrendered - with the tags left untouched.

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

So input like this gets processed accordingly:

所以这样的输入会得到相应的处理:

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

I've regexed all code-tags but I have no idea how to properly set the text of the element afterwards. If I use jQuery's text() method nothing gets escaped, if I set it with the html() method everything gets rendered and I gained nothing. Can anybody give me a hint here?

我已经对所有代码标记进行了正则表达式,但我不知道如何在之后正确设置元素的文本。如果我使用jQuery的text()方法没有任何转义,如果我用html()方法设置它,一切都会被渲染,我什么也得不到。谁能在这里给我一个暗示?

4 个解决方案

#1

Try replacing [code] with <xmp> and [/code] with </xmp> using regex or alike, and then use the jQuery html() function.

尝试用

和[/ code]用&lt;/ xmp&gt;替换[code],使用正则表达式或类似方法,然后使用jQuery html()函数。&lt;/p&gt;

Note that <xmp> is technically deprecated in HTML5, but it still seems to work in most browsers. For more information see How to display raw html code in PRE or something like it but without escaping it.

请注意,

在HTML5中在技术上已弃用,但它似乎仍适用于大多数浏览器。有关更多信息,请参阅如何在PRE中显示原始html代码或类似的内容但不转义它。&lt;/p&gt;

#2

You could replace the [code] and [/code] tags by <pre> and </pre> tags respectively, and then replace the < within the <pre> tags by & lt;
A programmatic solution based on Javascript is as follows

您可以分别用

和
 
 标签替换[code]和[/ code]标签,然后用< 标签替换标签内的
   <基于javascript的编程解决方案如下< p>

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;
}

#3

I would NOT recommend the accepted answer by Andreas at all, because the <xmp> tag has been deprecated and browser support is totally unreliable.

我不推荐Andreas接受的答案,因为

标签已被弃用,浏览器支持完全不可靠。&lt;/p&gt;

It's much better to replace the [code] and [/code] tags by <pre> and </pre> tags respectively, as raghav710 suggested.

如raghav710建议的那样,分别用

和
 
 标签替换[code]和[/ code]标签要好得多。

He's also right about replacing the < character with <, but that's actually not the only character you should replace. In fact, you should replace character that's a special character in HTML with corresponding HTML entities.

他也正确用 ;替换

Here's how you replace a character with its corresponding HTML entity :

以下是使用相应的HTML实体替换字符的方法:

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

#4

You can replace the [code]...[/code] with a placeholder element. And then $.parseHTML() the string with the placeholders. Then you can insert the code into the placeholder using .text(). The entire thing can then be inserted to the document (run below or in JSFiddle).

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

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);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Text
<div id="blah">place holder</div>
Around

The code above will need some modifications if you have multiple [code] blocks, you will need to generate a unique placeholder id for each code block.

如果你有多个[code]块,上面的代码需要一些修改,你需要为每个代码块生成一个唯一的占位符id。

If you may be inserting untrusted structure code, would highly recommend using large random number for the placeholder id to prevent a malicious user from hijacking the placeholder id.

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

#1