我想创建一个指向我编写的 Web 服务的 URL，http://mycoolthing.com，以及一个引用该页面上文本选择的#-anchor。
是否可以在 HTML/JS 中创建引用选择或 RangeObject 的锚点？
【问题讨论】：
span 中并为其分配一个id，然后浏览器会将页面滚动到具有# 中指定的id 的元素（尽管它不会选择任何内容，但您可以使用stackoverflow.com/questions/985272/… 的解决方案来选择文本）
标签： javascript html text anchor selection
看看 https://developer.mozilla.org/en-US/docs/Web/API/document.execCommand
创建链接
仅在存在选择时从选择中创建锚链接。这需要将 HREF URI 字符串作为 价值论据。 URI 必须至少包含一个字符， 这可能是一个空白。 （Internet Explorer 将创建一个链接 一个空 URI 值。）
喜欢
document.execCommand('createLink', false, 'http://google.com');
【讨论】：
根据这个网站，您可以使用 javascript 来查找页面中的一些文本。
http://www.javascripter.net/faq/searchin.htm
也许您可以创建一个指向该站点的链接并使用 GET 或 POST 包含文本选择，以便在加载其他页面时，您可以使用 javascript 和上一页的信息转到文本选择。
第一页是这样的：
window.location.href="url?text=textToFind"
在另一个页面中：
$(function () {
window.find(window.location.search)
});
【讨论】：
您可以使用
获取选定（突出显示）的文本var txt = window.getSelection().toString();
然后使用该值构建锚
href="abc.html#' + txt;
【讨论】：
正如我在评论中提到的，这是一个使用 JavaScript 和 url 上的哈希 (#) 来选择文本的选项。
分为两部分：
调用页面将有一个指向目标页面的链接（它们可以相同），并带有一个 # 表示您要选择的文本（或者如果您知道，则为元素的 ID）：
<a href="myPage.html#Lorem">Link to my page with Lorem select</a>
目标页面将包含一些 JavaScript 代码，这些代码将选择 # 中指示的文本（如果哈希是有效的元素 ID，它将选择该元素中的文本而不是文本）。
*请注意，对于这个解决方案，我使用了来自 Selecting text in an element (akin to highlighting with your mouse) 的一些代码（Kimtho6 的解决方案）
/**
* SelectText: function from https://stackoverflow.com/questions/985272/selecting-text-in-an-element-akin-to-highlighting-with-your-mouse (Kimtho6 solution)
*
* element: string that contains an element id (without the #)
*/
function SelectText(element) {
var doc = document;
var text = doc.getElementById(element);
if (doc.body.createTextRange) { // ms
var range = doc.body.createTextRange();
range.moveToElementText(text);
range.select();
} else if (window.getSelection) {
var selection = window.getSelection();
var range = doc.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
}
}
/**
* selectHashText: function that selects the first appearance of a text (or an element with the id) indicated in the location hash
*/
function selectHashText() {
// check if there's an element with that ID
if ($(document.location.hash).length == 0) {
// select some text in the page
var textToSelect = document.location.hash.substring(1);
// if it's not an empty hash
if (textToSelect != "") {
// iterate the different elements in the body
$("body *").each(function() {
// if one contains the desired text
if ($(this).text().indexOf(textToSelect) >= 0) {
// wrap the text in a span with a specific ID
$(this).html(
$(this).html().replace(textToSelect, "<span id='mySelect'>" + textToSelect + "</span>")
);
// select the text in the specific ID and stop iteration
SelectText("mySelect");
}
});
}
} else {
// select the content of the id in the page
SelectText(document.location.hash.substring(1));
}
}
// execute the text selection on page load and every time the hash changes
$(window).on("hashchange", selectHashText);
$(document).ready(function() { selectHashText(); });
我创建了这个jsfiddle，但它不带#，所以它没有多大帮助。你也可以see it on this web page。请注意，这与 jsfiddle（及更高版本）中的代码相同，只是在一页上。
更新：（从下面的 cmets 详细阐述）
不使用哈希，您可以在 GET 或 POST 中将要选择的文本作为参数传递（为简单起见，我将使用 GET）：
<a href="myPage?select=Lorem">Select Lorem</a>
然后使用您的后端语言（我使用 PHP，您可以使用任何其他甚至 JavaScript 解析位置 href），将文本保存到我之前使用的 textToSelect 变量中。最后一步，将.text() 替换为我使用的.html()（因此标签也包含在搜索中）
/**
* gup: function from https://stackoverflow.com/questions/979975/how-to-get-the-value-from-the-url-parameter (Haim Evgi's solution)
*
* name: string that contains the name of the parameter to return
*/
function gup( name ) {
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
return results == null ? null : results[1];
}
/**
* selectHashText: function that selects the first appearance of a text (or an element with the id) indicated in the "select" parameter
*/
function selectTextAcross() {
// get the "select" parameter from the URL
var textToSelect = decodeURIComponent(gup("select"));
// if it's not an empty hash
if (textToSelect != "") {
// iterate the different elements in the body
$("body *").each(function() {
// if one contains the desired text
if ($(this).html().indexOf(textToSelect) >= 0) {
// wrap the text in a span with a specific ID
$(this).html(
$(this).html().replace(textToSelect, "<span id='mySelect'>" + textToSelect + "</span>")
);
// select the text in the specific ID and stop iteration
SelectText("mySelect");
}
});
}
}
$(document).ready(function() { selectTextAcross(); });
你可以see it working on this web page。
关于这个解决方案：
【讨论】：
<div id='myId'>This is a test</div>，并且您只想选择“测试”，那么您将传递 10,4 类型的范围（文本的开头和大小）。那是对的吗？像#myId&range=10,4 这样的东西？还是只是范围？
divs，例如abc <div id='myId'>This is a test</div> 123，我想要选择abc This。起初我认为 JS SelectionObject 是我想要的，直到我注意到它明确包含所选文本，这使得该对象通常不适合包含在 URL 中（因为 URL 只能是 1024 个字符长）。
<div>....Text <div>you want</div> to select....</div>)，但它可能会在标签之间产生问题 (<div>....Text you want</div><div>to select....</div>)。例如，在您提到的代码中，生成的代码可能包含无效 HTML 的“交叉嵌套”（<div><span></div><div></span></div>，我不知道英文名称）标签，并且行为将取决于浏览器解释