用 span 替换每个字符

Question

我从对象obj[item].coveredText 中获取了一些搜索字符串字符串，并想用一个跨度替换此搜索字符串的每个字符。

实际上，我只能用一个跨度替换整个搜索字符串。感谢您的提示。

var rangeRoot = $("#plainText");

for (var item in obj) { 

    var input = rangeRoot.html();
    var str = obj[item].coveredText;

    var type = obj[item].type;
    var level = obj[item].level;
    var id = obj[item].id;

    var toReplace = str;

    var newSpan = '<span data-id="' + id + '" class="annotation level' + level + ' ' + type + '">' + str + '</span>';
    var regEx = new RegExp(toReplace, "g");
    var output = input.replace(regEx, newSpan);
    $(rangeRoot).empty();
    $(rangeRoot).append(output);

  };

输入示例

这是一个文本示例

对象

       {
            "coveredText": "example",
            "type": "exampleType",
            "id": 4704,
            "level": 2
        }

输出

this is an <span data-id="4704" class="annotation level2 exampleType">e</span><span data-id="4704" class="annotation level2 exampleType">x</span><span data-id="4704" class="annotation level2 exampleType">a</span><span data-id="4704" class="annotation level2 exampleType">m</span>

...

Answer 1

要使用正则表达式修复您的原始代码模式，您应该指定一个替换函数，该函数再次使用.replace 将每个字符替换为由 HTML 文本包围的字符：

const input = `This is an example of an text`;
const obj = {
  "coveredText": "example",
  "type": "exampleType",
  "id": 4704,
  "level": 2
};
const { coveredText, type, id, level } = obj;
const pattern = new RegExp(coveredText, 'g');

const replacer = () => (
  coveredText.replace(/./g, char => (
    `<span data-id="${id}" class="annotation level${level} ${type}">${char}</span>`
  ))
);
const output = input.replace(pattern, replacer);
console.log(output);

Answer 2

首先将coveredText拆分成独立的字符，并创建一个字符跨度映射

然后对于输入中的每个字符，使用映射查找将其替换为对应的跨度。

在下面找到代码。

您不必使用 for..in 循环键，因为它用于遍历各个键，并且在这种情况下不是根据需要将值复制到变量的必需逻辑。

var rangeRoot = $("#plainText");
    var input = rangeRoot.text();
    var obj = {
            "coveredText": "example",
            "type": "exampleType",
            "id": 4704,
            "level": 2
        }
    var str = obj.coveredText;
    var type = obj.type;
    var level = obj.level;
    var id = obj.id;

    var spanMap = str.split('').reduce((acc,char) => {
      if(!acc[char])
         acc[char] = `<span data-id="${id}" class="annotation level${level} ${type} "> ${char} </span>`;
      return acc;
      }, {}) 

    // console.log(spanMap); // see the mapping here;

    var output = input.split('').map(char => spanMap[char]? spanMap[char] : char).join('');
    $(rangeRoot).empty();
    $(rangeRoot).append(output);

.level2 {
  color: red;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="plainText"> Hello world </div>