javascript - 在 div 中包围希伯来语和英语文本

Question

我正在尝试在段落中的希伯来语和英语句子周围添加跨度标签。例如。 “那么，到底怎么样了？” 将变成:

[span]so[/span][span]היי[/span][span]all whats up[/span][span]אתכם[/span]

我一直在尝试使用正则表达式，但它只是删除希伯来语单词并一次性加入英语单词。

var str = 'so היי all whats up אתכם?'
var match= str.match(/(\b[a-z]+\b)/ig);
var replace = match.join().replace(match.join(),'<span>'+match.join()+'</span>')

Answer 1

这里之前的答案没有考虑到整个单词的要求。事实上，实现这一点很困难，因为\b字边界不支持与相邻希伯来语 Unicode 符号的字边界，我们只能使用 \u 与字符类匹配。符号。

我建议使用前瞻和捕获组来确保捕获整个希伯来语单词((^|[^\u0590-\u05FF])([\u0590-\u05FF]+)(?![\u0590-\u05FF])，确保希伯来语单词之前有一个非希伯来语符号或字符串开头 - 添加 \s if希伯来语单词之间有空格!)，和 \b[a-z\s]+\b匹配以空格分隔的整个英语单词的序列。

如果您打算插入 <span>将整个单词标记到句子中，这里有一个可能有帮助的函数:

var str = 'so היי all whats up אתכם?';
//var str = 'so, היי, all whats up אתכם?';
var result = str.replace(/\s*(\b[a-z\s]+\b)\s*/ig, '<span>$1</span>');
result = result.replace(/(^|[^\u0590-\u05FF])([\u0590-\u05FF]+)(?![\u0590-\u05FF])/g, '$1<span>$2</span>');
document.getElementById("r").innerHTML = result;

span {
    background:#FFCCCC;
    border:1px solid #0000FF;
}

<div width="645" id="r"/>

结果:

<span>so</span><span>היי</span><span>all whats up</span><span>אתכם</span>?

如果您的输出中不需要任何标点符号或字母数字实体，只需连接整个英语和希伯来语单词，则使用

var str = 'היי, User234, so 222היי all whats up אתכם?';
var re = /(^|[^\u0590-\u05FF])([\u0590-\u05FF]+)(?![\u0590-\u05FF])|(\b[a-z\s]+\b)/ig;
var res = [];
while ((m = re.exec(str)) !== null) {
    if (m.index === re.lastIndex) {
        re.lastIndex++;
    }
  if (m[1] !== undefined) {
      res.push('<span>'+m[2].trim()+'</span>');
    }
  else
    {
      res.push('<span>'+m[3].trim()+'</span>');
    }
  
}
document.getElementById("r").innerHTML = res.join("");

span {
    background:#FFCCCC;
    border:1px solid #0000FF;
}

<div width="645" id="r"/>

结果:

<span>היי</span><span>so</span><span>היי</span><span>all whats up</span><span>אתכם</span>