Как отнять подстроку у ID элемента

241

11 августа 2017, 01:14

Хочу отнять подстроку у ID. Вот этот код выводит NaN:

function someFunction(x) { 
    var str = x.id; 
    str = str - "Link"; 
    alert(str); 
}

<li><a id="myLink" onclick="someFunction(this)">Должно остаться только my</a></li>

Что я делаю не так? Есть ли решения лучше?

Answer 1

Получить строку путём удаления из ID первого вхождения строки "Link" можно так:

function someFunction(x) { 
    var str = x.id.replace("Link", ""); 
    console.log(str); 
}

<li><a id="myLink" onclick="someFunction(this)">Должно остаться только my</a></li>

Тот же вариант с addEventListener вместо onclick:

document.addEventListener("DOMContentLoaded", function() { 
    document.getElementById("myLink").addEventListener("click", function(event) { 
        var str = event.target.id.replace("Link", ""); 
        console.log(str); 
    }); 
});

<li><a id="myLink">Должно остаться только my</a></li>

Для удаления всех вхождений replace можно изменить:

replace(/Link/g, "")

Вообще говоря, в данной ситуации с единственным элементом с ID myLink с тем же успехом можно было просто сделать var str = "my";. Поэтому, для полноты картины, вариант с несколькими ссылками:

document.addEventListener("DOMContentLoaded", function() { 
    var links = document.getElementsByClassName("links"); 
    for (var i = 0; i < links.length; i++) { 
        links[i].addEventListener("click", function(event) { 
            var str = event.target.id.replace("Link", ""); 
            console.log(str); 
        }); 
    } 
});

<ul> 
    <li><a id="firstLink" class="links">Первая ссылка</a></li> 
    <li><a id="secondLink" class="links">Вторая ссылка</a></li> 
    <li><a id="thirdLink" class="links">Третья ссылка</a></li> 
</ul>

И, наконец, то же самое при использовании jQuery:

$(function() { 
    $(".links").on("click", function() { 
        var str = this.id.replace("Link", ""); 
        console.log(str); 
    }); 
});

<ul> 
    <li><a id="firstLink" class="links">Первая ссылка</a></li> 
    <li><a id="secondLink" class="links">Вторая ссылка</a></li> 
    <li><a id="thirdLink" class="links">Третья ссылка</a></li> 
</ul> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

Вот как вариант, но лучше так не делать вариант ниже с replace будет лучше

function someFunction(x) { 
    var str = x.id; 
    str = str.substr(0,2); 
    alert(str); 
}

<li><a id="myLink" onclick="someFunction(this)">Должно остаться только my</a></li>

Вариант по лучше. без учета регистра.

function someFunction(x) { 
    var str = x.id; 
    str = str.replace(/Link/i, ''); 
    alert(str); 
}

<li><a id="myLInK" onclick="someFunction(this)">Должно остаться только my</a></li>

И наконец последний вариант с учетом регистра.

function someFunction(x) { 
    var str = x.id; 
    str = str.replace('Link', ''); 
    alert(str); 
}

<li><a id="myLink" onclick="someFunction(this)">Должно остаться только my</a></li>

Создание интернет-магазина одежды в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Offset() undefined, div внутри td

Здравствуйте, не пойму почему у div, который я добавляю внутрь td не определено свойство offset? div'ы добавляются и нормально отображаютсяВот код:

210

javascript

drag & click на одном элементе JS

Есть такой код:

222

javascript

navigator.registerProtocolHandler аналог для обработчика на диске

Необходимо для Chromium установить обработчик протокола tel

180

javascript

Изменение фона ссылки

Есть поле ввода и ссылкаЕсли условие не выполнено, то ссылка должна отключаться и изменяется текст

253