javascript - 如何使用 select 方法选择文本的一部分?

标签 javascript

我想用 JavaScript 选择文本的一部分。我想根据不使用节点的长度指定范围。例如:我有文本“AB DDSD”,我想从 0-3 中进行选择。我不能用 span 之类的元素包装它,因为阿拉伯字母不会连接。

下面的示例选择了 foo 类中的所有文本,但如何为其指定范围?

var selection = window.getSelection();
var txt = document.getElementsByClassName("foo");
var range = document.createRange();
range.selectNodeContents(txt);
selection.removeAllRanges();
selection.addRange(range); 

我愿意使用其他方法代替 select。我的目标是为 p 标记中的某些字符着色,但不能使用任何元素将其包装起来。如果我只将 سس 的一个字符换行,那么它会变成 سس

最佳答案

实际上保留了连字:

let t = document.getElementById('test');
t.innerHTML = `<span style="color: red">${t.textContent.slice(0,3)}</span>${t.textContent.slice(3)}`;
<!DOCTYPE html>
<html>
	<head><meta charset="utf-8"></head>
	<body>
		<span id="test">مرحبا بالعالم</span>
	</body>
</html>

这可能与浏览器的字体和渲染有关,但这是我的样子:

enter image description here

考虑到 purpose,我不认为添加零宽度空间是解决方案.

关于javascript - 如何使用 select 方法选择文本的一部分?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52249307/

相关文章:

javascript - 延迟关闭 JavaScript 窗口

javascript - 非常基本的 React + NodeJS 获取 : Why is my response not what I want?

javascript - 找不到元素的元素

javascript - Jinja 和 javascript 语法冲突?

如果没有 const 字符串,Javascript alert() 不显示?

javascript - 按升序和降序对日期数组进行排序部分不正确的逻辑- Protractor

javascript - 除非页面移动,否则不会触发滚动事件

javascript - element.children 的 console.log 显示长度为 0,但稍后展开时有三个条目

javascript - 如果我想在 PHP 中编辑行,请更新查询插入

javascript - 选项卡中的 jQuery Mobile ListView 和渲染问题