Javascript: 如何检测单词是否突出显示

下面是一个剧本:

<script>
function getSelText()
{
    var txt = '';
    if (window.getSelection)
    {
        txt = window.getSelection();
    }
    else if (document.getSelection)
    {
        txt = document.getSelection();
    }
    else if (document.selection)
    {
        txt = document.selection.createRange().text;
    }
    else return;
document.aform.selectedtext.value = txt;
}
</script>
<input type="button" value="Get selection" onmousedown="getSelText()">
<form name="aform">
<textarea name="selectedtext" rows="5" cols="20"></textarea>
</form>

蟾蜍代码:

Http://www.codetoad.com/javascript_get_selected_text.asp

在您的例子中，您希望在选择完成时调用这个脚本，然后您可以按照自己的意愿处理它，例如，使用 AJAX 请求获取相关信息，就像《纽约时报》可能做的那样。

最简单的方法是检测文档上的 mouseup和 keyup事件，并检查是否选择了任何文本。以下内容可以在所有主流浏览器中使用。

例子: http://www.jsfiddle.net/timdown/SW54T/

function getSelectedText() {
var text = "";
if (typeof window.getSelection != "undefined") {
text = window.getSelection().toString();
} else if (typeof document.selection != "undefined" && document.selection.type == "Text") {
text = document.selection.createRange().text;
}
return text;
}


function doSomethingWithSelectedText() {
var selectedText = getSelectedText();
if (selectedText) {
alert("Got selected text " + selectedText);
}
}


document.onmouseup = doSomethingWithSelectedText;
document.onkeyup = doSomethingWithSelectedText;

使用 Rangy.js和 jQuery:

$('#elem').on('keyup mouseup', function(){
var sel = rangy.getSelection()
if (sel.rangeCount === 0 || sel.isCollapsed) return
alert(sel.toString())
})

在我的示例中，我希望能够突出显示该行中的一个文本，然后单击该行并将我发送到其他路由，如“/tity/: id”;

我创建了一个检测鼠标高亮显示某些文本的函数:

export const isHighlighting = () => {
// detects mouse is highlighting a text
return window.getSelection && window.getSelection().type === 'Range';
};

然后将其添加到

const handleClick = (id) => {
if (!isHighlighting() {
history.push(`/entity/${id}`)
}
}


{data.map((item) => (
<tr>
<td onClick={() => handleClick(item.id)}>{item.name}</>
</tr>
))}

通过这种方式，用户可以突出显示，然后名称字段或单击其他地方，进入“/tity/: id”