<分区>
我正在构建一个呈现长文本段落的文本阅读器，既需要记录对单个单词的点击，也需要为单个单词动态着色。但是，它不需要是可编辑的。
构建此类 html 的最有效方法(适用于现代、移动和浏览器 html 引擎)是什么？我们之前拥有的是每个单词和空格都是它自己的跨度，并且有听众附加到它的东西。这对我来说似乎相当低效。
标签 javascript html css
<分区>
我正在构建一个呈现长文本段落的文本阅读器，既需要记录对单个单词的点击，也需要为单个单词动态着色。但是，它不需要是可编辑的。
构建此类 html 的最有效方法(适用于现代、移动和浏览器 html 引擎)是什么？我们之前拥有的是每个单词和空格都是它自己的跨度，并且有听众附加到它的东西。这对我来说似乎相当低效。
最佳答案
答案在 https://stackoverflow.com/a/9304990/441757可能会提供一些见解。
http://jsfiddle.net/Vap7C/80/ 有它的演示
$("body").click(function() {
// Gets clicked on word (or selected text if text is selected)
var t = '';
if (window.getSelection && (sel = window.getSelection()).modify) {
// Webkit, Gecko
var s = window.getSelection();
if (s.isCollapsed) {
s.modify('move', 'forward', 'character');
s.modify('move', 'backward', 'word');
s.modify('extend', 'forward', 'word');
t = s.toString();
s.modify('move', 'forward', 'character'); //clear selection
}
else {
t = s.toString();
}
} else if ((sel = document.selection) && sel.type != "Control") {
// IE 4+
var textRange = sel.createRange();
if (!textRange.text) {
textRange.expand("word");
}
// Remove trailing spaces
while (/\s$/.test(textRange.text)) {
textRange.moveEnd("character", -1);
}
t = textRange.text;
}
alert(t);
});
关于javascript - 选择和动态设置长 HTML 段落样式的有效方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32255312/