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

首先将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>

Answer 2

要使用正则表达式修复原始代码模式，应指定一个替换函数，该函数再次使用songView.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { if(mediaPlayer!=null){ mediaPlayer.release(); } Song song=songList.get(position); Toast.makeText(getActivity(),song.getFilePath(),Toast.LENGTH_LONG).show(); Uri uri= Uri.parse("file:///"+song.getPath()); mediaPlayer.setDataSource(fileUri); mediaPlayer.prepare(); mediaPlayer.start(); } });将每个字符替换为HTML文本所包围的字符：

.replace

用span替换每个字符

2 个答案: