Question

我目前正在编写自己的BBCode解析器。现在我想做的是允许用户输入BBCode，然后将其写入HTML并显示它具有HTML。然而，如果他们输入HTML，它只会将其显示为普通的旧HTML。以下是我到目前为止的情况：

var replacebbcode = $('#textareainput').val().replace(/(\[((\/?)(b|u|i|s|sub|sup))\])/gi, '<$2>');
$('#posttextareadisplay').html(replacebbcode);

在上面我只是用HTML标签替换所有BBCode。问题是如果用户直接输入HTML，它也将使用它。基本上，我如何将BBCode显示为HTML，将实际HTML显示为文本？

Answer 1

使用全文设置目标text();所以你的HTML标签将被编码。然后在编码的HTML上进行BBCode替换：

$('#posttextareadisplay').text( $('#textareainput').val() );

var replacebbcode = $('#posttextareadisplay').
  html().
  replace(/(\[((\/?)(b|u|i|s|sub|sup))\])/gi, '<$2>');

$('#posttextareadisplay').html( replacebbcode );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<textarea name="" id="textareainput" cols="30" rows="10">
  [b]bold[/b] &lt;bold>bold&lt;/bold>
</textarea>

<p id="posttextareadisplay"></p>

Answer 2

如果要替换为常规html标签，并仅限于特定的BB标签。这是在jQuery和正则表达式的帮助下完成的：

const replaceBBCodeAsElements = (jElement, tagMapping = {}) =>
  jElement.html(jElement.html().replace(/\[(?<tag>\w+)\](.+?)\[\/\k<tag>\]/g,
      (...{ 0: original, 1: tagName, 2: tagContent }) =>
          tagMapping.hasOwnProperty(tagName) ? $(tagMapping[tagName]).html(tagContent)[0].outerHTML : original
  ));

这是使用此功能的示例：

const replaceBBCodeAsElements = (jElement, tagMapping = {}) =>
  jElement.html(jElement.html().replace(/\[(?<tag>\w+)\](.+?)\[\/\k<tag>\]/g,
      (...{ 0: original, 1: tagName, 2: tagContent }) =>
          tagMapping.hasOwnProperty(tagName) ? $(tagMapping[tagName]).html(tagContent)[0].outerHTML : original
  ));

const config = {
  'a': '<div class="tag some-special-a-tag" />',
  'object': '<span class="tag some-special-object-tag" />',
  'pre': '<p class="tag some-special-pre-tag" />',
  'test': '<div data-hello="world" class="tag some-special-test-tag" />',
};

$("#input").bind("input", function() {
  const jRes = $("#result");
  jRes.text(this.value);
  replaceBBCodeAsElements(jRes, config);
}).trigger('input');

#input {
  width: 400px;
  height: 100px;
}

#result {
  white-space: pre-wrap;
}

.tag {
 display: inline-block;
 background: rgba(0,0,0,.1);
 padding: 0 4px;
 border-radius: 5px;
 font-family: monospace;
 font-weight: bold;
 margin: 0;
 box-shadow: 0 0 10px 0 rgba(0,0,0,.6);
}

.some-special-a-tag {
 background: rgba(255,0,0,.1);
}

.some-special-object-tag {
 background: rgba(0,255,0,.1);
}

.some-special-pre-tag {
 background: rgba(0,0,255,.1);
}

.some-special-test-tag {
 background: rgba(0,255,255,.1);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<textarea id="input">This &lt;p&gt;is&lt;/p&gt; 
a [a]test[/a] text [pre]with[/pre] [b]some[/b] va[test]lu[/test]e.

And this is how it looks [object]when a [pre]tag inside[/pre] other[/object] tag</textarea>

<div id="result"></div>

上面的示例将仅解析[a]，[object]，[pre]和[test] BB标签，并根据它们指向的创建元素对其进行转换。

注意，由于RegExp Named Group的支持，JS的最低要求版本为ES2018。

将HTML显示为文本，将BBCode更改为显示为HTML JQuery / JS

2 个答案: