Question

我想创建一个指向我编写的网络服务的网址http://mycoolthing.com，以及一个引用该网页上文字选择的#anchor。

HTML / JS中是否可以创建引用Selection或RangeObject的锚？

Answer 1

基于铬的浏览器现在支持滚动到文本片段

https://chromestatus.com/feature/4733392803332096#:~:text=This%20feature%20allows%20a%20user,and%20scrolls%20it%20into%20view。

Answer 2

根据此网站，您可以使用javascript在页面中查找一些文字。

http://www.javascripter.net/faq/searchin.htm

也许您可以创建一个指向该网站的链接，并在GET或POST中包含文本选择，这样当加载另一个页面时，您可以使用javascript和上一页的信息进行文本选择。

第一页中的内容如下：

window.location.href="url?text=textToFind"

在另一页：

$(function () {
window.find(window.location.search)
});

Answer 3

正如我在评论中提到的，这里有一个选项，可以通过在网址上使用JavaScript和哈希（＃）来选择文本。

它分为两部分：

调用页面将有一个指向目标页面的链接（它们可以是相同的），带有一个＃，表示您要选择的文本（或者如果您知道，则为元素的ID）： / p>
<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＆＃39;解决方案）

/**
 * 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（及更高版本）中的代码相同，只是在一个页面上。

更新 :(根据以下评论详述）

不使用散列，您可以将要选择的文本作为参数传递给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。

关于此解决方案：

它有效（嘿！比没有好！：P）
您可以包含html标签（不能使用＃one）
您需要了解文档的来源
生成的代码可能无效，然后结果可能不是预期的（我测试的所有浏览器，他们在第一个＆＃34;交叉＆＃34;标记后停止选择）

Answer 4

看看 https://developer.mozilla.org/en-US/docs/Web/API/document.execCommand

<强>建立连结

仅当有选择时，才从选择中创建锚链接。这需要将HREF URI字符串作为a传入价值论证。 URI必须至少包含一个字符，这可能是一个白色的空间。（Internet Explorer将创建一个链接空URI值。）

像

document.execCommand('createLink', false, 'http://google.com');

Answer 5

您可以使用

获取所选（突出显示的）文本

var txt = window.getSelection().toString();

然后使用该值

构建锚点

href="abc.html#' + txt;

使用锚点到文本选择创建URL

5 个答案: