javascript - 如何删除突出显示的单词后的多余空间？

我有一个获取数字并从句子中突出显示该单词编号的函数。

该句子将使用波斯语和从右至左。
所有单词都用“ |”分隔在句子中。

我正在使用Arrays，因为其他常见方法不适用于RTL文本，包括本文中的replace方法：
How to highlight text using javascript

问题是当单词突出显示时，每个单词后面都有一个多余的空间，我不需要突出显示。

我想消除这一点。

我在这里准备了一个演示：
https://liveweave.com/vp6YQi

function hilWrd(i) {
  var txt1 = document.getElementById( "RTL1" ).innerHTML;
  var txt2 = document.getElementById( "RTL2" );
  var ary = txt1.split("|");

  ary.splice( i-1, 0, "<span class='hil'>" );
  ary.splice( i-1 + 2, 0, "</span>" );
  txt2.innerHTML = ary.join(" ");
}

预期结果：突出显示“تست”
实际结果：突出显示“تست”

最佳答案

无需增加数组元素的数量，只需将单词包装在该特定数组元素内即可：

ary[i-1] = "<span class='hil'>" + ary[i-1] + "</span>";

演示-Link