javascript - 仅针对文本而不是 HTML 代码将哑引号转换为智能引号

Question

我正在将 contenteditable 中的哑引号转换为智能引号但问题是它也在 HTML 元素中替换了它们，例如:

<a href=“something” title=“something”

因此使它们无效。我只想为用户的文本做这件事。这是问题所在。我必须保留原始格式元素，所以我不能做类似的事情:

clean($('#something_container').text());

这将在返回时删除所有 HTML 元素(格式)。这是我的代码:

content = clean($('#post_content').html());
$('#post_content').html(content);

// replaces ", ', --, <div> with <p>
function clean(html) {
  html = html.replace(/'\b/g, "\u2018")  // opening singles
         .replace(/\b'/g, "\u2019")  // closing singles
         .replace(/"\b/g, "\u201c")  // opening doubles
         .replace(/\b"/g, "\u201d")  // closing doubles
         .replace(/--/g,  "\u2014") // em-dashes
         .replace(/<div>/g, "<p>")  //<div> to <p>
         .replace(/<\/div>/g, "</p>"); //</div> to </p>
  return html;
};

什么是最好(最有效)的方法来替换用户文本中的哑引号并跳过像 <img src="" /> 这样的 HTML 标签？ ？谢谢!

Answer 1

这里有一个可能的方法(不知道效率如何，但如果你只处理用户手动输入的字符串，它们可能不会很长，所以应该没关系):

1. 将您的字符串拆分为不重叠的 block :HTML 标记与其余标记
2. 只在非标签中“教育报价”，让标签单独存在
3. 把绳子放回原处

如果您处理的 HTML 格式正确(特别是，如果没有“<”四处 float )，则拆分成 block 很容易:

var html   = '<p style="color:red">some "quotes" in here</p>'
var chunks = html.match(/(<.+?>|[^<]+)/g)
// returns Array: ['<p style="color:red">', 'some "quotes" in here', '</p>']

然后，给定你的 clean()处理替换的函数，你可以说:

cleaned = chunks.map(function(chunk){
  return /</.test(chunk) ? chunk : clean(chunk)
}).join('');

在除 < 之间的任何地方应用您的替换和 > .