Javascript getElementById на основе частичной строки

Мне нужно получить идентификатор элемента, но значение динамическое, и только его начало всегда одинаково.

Вот фрагмент кода.

<form class="form-poll" id="poll-1225962377536" action="/cs/Satellite">

Идентификатор всегда начинается с poll-, тогда числа являются динамическими.

Как я могу получить идентификатор, используя только JavaScript, а не jQuery?


person calebo    schedule 09.08.2011    source источник
comment
покажите, пожалуйста, образец разметки для наглядности   -  person naveen    schedule 09.08.2011
comment
Вам нужен идентификатор элемента или элемент с идентификатором?   -  person aroth    schedule 09.08.2011
comment
Я хочу получить идентификатор элемента.   -  person calebo    schedule 09.08.2011
comment
Если это ваш собственный код веб-сайта, я бы порекомендовал вам присвоить каждому из этих элементов класс. Это по-прежнему потребует некоторой степени кода, но для getElementsByClassName есть много встроенных функций. Некоторые современные браузеры изначально поддерживают указанную функцию.   -  person Kranu    schedule 09.08.2011
comment
@Kranu - getElementsByClassName не совсем готов. Если вы хотите, чтобы он работал правильно в IE (по крайней мере, в более старых версиях IE ... возможно, это было исправлено в более новых версиях), вам нужно исправить это самостоятельно.   -  person aroth    schedule 09.08.2011
comment
@Aroth: Говоря о предварительной сборке, я имел в виду, что вы можете найти фрагмент кода, который можно просто скопировать и вставить, чтобы добавить поддержку. Термин, о котором вы говорите, - это собственная поддержка.   -  person Kranu    schedule 09.08.2011
comment
Возможный дубликат jQuery Selector: Id Ends With?   -  person Claire    schedule 19.05.2018


Ответы (8)


Вы можете использовать querySelector для этого:

document.querySelector('[id^="poll-"]').id;

Селектор означает: получить элемент, в котором атрибут [id] начинается со строки "poll-".

^ соответствует началу
* соответствует любой позиции
$ соответствует концу

jsfiddle

person A1rPun    schedule 18.06.2014
comment
Работает только при первом совпадении. - person Sophia Feng; 20.03.2015
comment
querySelectorAll отлично. За исключением того, что document.querySelectorAll('[id^="poll-"]') возвращает список. Нам нужно перебрать список, чтобы получить идентификаторы вместо использования document.querySelectorAll('[id^="poll-"]').id. - person Sophia Feng; 25.03.2015
comment
Что, если бы он был немного другим в том смысле, что вы знали КОНЕЦ динамического значения? В моем сценарии это id = dynamic_constant? - person JoeL; 13.11.2015
comment
@JoeL ^ соответствует началу, $ соответствует концу, а * соответствует любой позиции. В вашем случае это будет id$="dynamic_constant". - person A1rPun; 13.11.2015
comment
Как насчет случая, когда я знаю начало и конец, но середина динамична, например id='user-123456-image' - person Dave Potts; 27.07.2016
comment
Извините, я должен был быть более ясным в моем примере. Как мне выбрать все элементы с идентификатором, который начинается с «user-» И заканчивается «-image», но число в середине может варьироваться. - person Dave Potts; 28.07.2016
comment
@DavePotts Используйте [id^=user-][id$=-image] :) - person A1rPun; 03.08.2016
comment
Вышеупомянутый синтаксис регулярного выражения меня озадачивает: почему это '[id ^ = poll-]'? Почему не «[id = ^ poll-]» или «[id = ^ poll-]»? - person user1785730; 15.05.2017
comment
@ user1785730 Поскольку это только выглядит как регулярное выражение, это не так. Это просто особенность синтаксиса queryselector. - person A1rPun; 15.05.2017
comment
Фактически, это синтаксис CSS Selector (developer.mozilla.org/en-US / docs / Web / CSS / Attribute_selectors), который используется API querySelector. - person Ilya Streltsyn; 19.12.2019
comment
как использовать это, если начало и конец пустые, допустим, document.querySelector ('[id = -poll -]'). id; - person sanjeet pal; 16.02.2020

Попробуй это.

function getElementsByIdStartsWith(container, selectorTag, prefix) {
    var items = [];
    var myPosts = document.getElementById(container).getElementsByTagName(selectorTag);
    for (var i = 0; i < myPosts.length; i++) {
        //omitting undefined null check for brevity
        if (myPosts[i].id.lastIndexOf(prefix, 0) === 0) {
            items.push(myPosts[i]);
        }
    }
    return items;
}

Образец разметки HTML.

<div id="posts">
    <div id="post-1">post 1</div>
    <div id="post-12">post 12</div>
    <div id="post-123">post 123</div>
    <div id="pst-123">post 123</div>
</div>

Назовите это как

var postedOnes = getElementsByIdStartsWith("posts", "div", "post-");

Демо здесь: http://jsfiddle.net/naveen/P4cFu/

person naveen    schedule 09.08.2011

querySelectorAll с современной нумерацией

polls = document.querySelectorAll('[id ^= "poll-"]');
Array.prototype.forEach.call(polls, callback);

function callback(element, iterator) {
    console.log(iterator, element.id);
}

Первая строка выбирает все элементы, которые id начинаются со строки poll-. Вторая строка вызывает перечисление и функцию обратного вызова.

person Serge Stroobandt    schedule 28.10.2019

Учитывая, что вы хотите определить полный идентификатор элемента на основе только префикса, вам придется выполнить поиск по всей DOM (или, по крайней мере, поиск по всему поддереву, если вы знаете о некоторых элемент, который всегда гарантированно содержит ваш целевой элемент). Вы можете сделать это примерно так:

function findChildWithIdLike(node, prefix) {
    if (node && node.id && node.id.indexOf(prefix) == 0) {
        //match found
        return node;
    }

    //no match, check child nodes
    for (var index = 0; index < node.childNodes.length; index++) {
        var child = node.childNodes[index];
        var childResult = findChildWithIdLike(child, prefix);
        if (childResult) {
            return childResult;
        }
    }
};

Вот пример: http://jsfiddle.net/xwqKh/

Имейте в виду, что идентификаторы динамических элементов, подобные тем, с которыми вы работаете, обычно используются, чтобы гарантировать уникальность идентификаторов элементов на одной странице. Это означает, что существует вероятность того, что существует несколько элементов с одним и тем же префиксом. Наверное, вы хотите найти их все.

Если вы хотите найти все элементы с заданным префиксом, а не только первый, вы можете использовать что-то вроде того, что показано здесь: http://jsfiddle.net/xwqKh/1/

person aroth    schedule 09.08.2011

Я не совсем уверен, что знаю, о чем вы спрашиваете, но вы можете использовать строковые функции для создания фактического идентификатора, который вы ищете.

var base = "common";
var num = 3;

var o = document.getElementById(base + num);  // will find id="common3"

Если вы не знаете фактический идентификатор, вы не можете найти объект с помощью getElementById, вам придется найти его каким-либо другим способом (по имени класса, по типу тега, по атрибуту, по родителю, по дочернему элементу, и т.д...).

Теперь, когда вы, наконец, предоставили нам часть HTML, вы можете использовать этот простой JS для поиска всех элементов формы, идентификатор которых начинается с "poll-":

// get a list of all form objects that have the right type of ID
function findPollForms() {
    var list = getElementsByTagName("form");
    var results = [];
    for (var i = 0; i < list.length; i++) {
        var id = list[i].id;
        if (id && id.search(/^poll-/) != -1) {
            results.push(list[i]);
        }
    }
    return(results);
}

// return the ID of the first form object that has the right type of ID
function findFirstPollFormID() {
    var list = getElementsByTagName("form");
    var results = [];
    for (var i = 0; i < list.length; i++) {
        var id = list[i].id;
        if (id && id.search(/^poll-/) != -1) {
            return(id);
        }
    }
    return(null);
}
person jfriend00    schedule 09.08.2011
comment
Проблема в том, что я знаю только базу, но не знаю числовое значение. - person calebo; 09.08.2011
comment
Тогда вы не сможете использовать getElementById без полного имени идентификатора. Если вы разместите свой реальный HTML-код, мы сможем помочь с другой стратегией. В вашем новом примере вы можете использовать стратегию CSS3 для идентификатора, который начинается с post-, но есть только несколько браузеров, в которых вы можете сделать это с помощью простого JS / браузера (поддержка механизма выбора CSS3). Было бы намного лучше использовать селекторный движок в jQuery, Sizzle, YUI3 и т. Д. - person jfriend00; 09.08.2011
comment
Мне просто нужно иметь возможность установить переменную с элементом с идентификатором, начинающимся с 'poll-' в качестве значения. ‹Form class = form-poll id = poll-1225962377536 action = / cs / Satellite target = _blank› - person calebo; 09.08.2011
comment
Структура тегов, идентификаторов и классов - это все, что у вас есть, если вы не собираетесь использовать более продвинутый механизм выбора. Если вы не хотите делиться и не будете использовать селекторный движок, то мы в тупике. Если бы вы просто сказали нам, что это за тег, мы могли бы посмотреть на них все на предмет частичного совпадения идентификатора. - person jfriend00; 09.08.2011
comment
Хорошо, теперь, когда вы показали некоторый HTML, я добавил две разные функции, которые будут находить элементы формы этого типа. - person jfriend00; 09.08.2011

Вероятно, вам придется либо присвоить ему постоянный класс и вызвать getElementsByClassName, либо, может быть, просто использовать getElementsByTagName и просмотреть результаты, проверяя имя.

Я бы посоветовал взглянуть на вашу основную проблему и заранее выяснить, как можно узнать идентификатор.

Может быть, если вы разместите немного больше о том, почему вы получаете это, мы могли бы найти лучшую альтернативу.

person Joe Enos    schedule 09.08.2011
comment
Имейте в виду, что getElementsByClassName не поддерживается в некоторых старых браузерах (в любой версии IE до IE9). - person jfriend00; 09.08.2011
comment
@ jfriend00 Хороший звонок. Это одна из причин, по которой я использую jQuery для всех своих сценариев DOM, поэтому мне не нужно помнить о подобных вещах. - person Joe Enos; 09.08.2011
comment
Когда у меня нет jQuery и я не хочу втягивать его на страницу, я использую библиотеку Sizzle, которая (я думаю) является механизмом выбора внутри jQuery. Это также решает эту проблему и дает вам полную логику выбора. В наши дни нет особой причины жить только с тем, что IE8 может делать изначально. - person jfriend00; 09.08.2011

Вы используете свойство id для получения идентификатора, затем метод substr, чтобы удалить его первую часть, а затем, необязательно, parseInt, чтобы превратить его в число:

var id = theElement.id.substr(5);

or:

var id = parseInt(theElement.id.substr(5));
person Guffa    schedule 09.08.2011

<form class="form-poll" id="poll-1225962377536" action="/cs/Satellite" target="_blank">

Идентификатор всегда начинается с «post-», тогда числа являются динамическими.

Пожалуйста, проверьте свои имена идентификаторов, "опрос" и "сообщение" очень разные.

Как уже было сказано, вы можете использовать querySelector:

var selectors = '[id^="poll-"]';
element = document.querySelector(selectors).id;

но querySelector не найдет "опрос", если вы продолжите запрашивать "сообщение": '[id^="post-"]'

person jester    schedule 31.08.2017