29.07.2013, 17:35
|
|
Новичок на форуме
|
|
Регистрация: 29.07.2013
Сообщений: 5
|
|
|
Изменение цвета слова на странице
Пожалуйста подскажите скрипт который изменял бы цвет какого либо слова повторяющегося на всей странице к примеру слово - приложение
Пример:
Инженерия программного обеспечения (англ. Software Engineering) — приложение систематического, дисциплинного, измеримого подхода к развитию, оперированию и обслуживанию программного обеспечения, а также исследованию этих подходов; то есть, приложение дисциплины инженерии к программному обеспечению.
2) И еще такой скрипт который при нахождении какого либо набора символов закрашивал бы в определенный цвет всю строку что сделует за ними и сами символы к примеру символы %!%
Пример:
Инженерия программного обеспечения (англ. Software Engineering) — приложение систематического, дисциплинного, измеримого подхода к развитию,%!% оперированию и обслуживанию программного обеспечения, а также исследованию этих подходов; то есть,
приложение дисциплины инженерии к программному обеспечению.
3) И подобный скрипт но что бы закрашивал весь текст находящийся между двумя наборами символов открывающим %( и закрывающим )% как коментарии.
Пример:
Инженерия программного обеспечения (англ. Software Engineering) — приложение систематического, дисциплинного, измеримого подхода к развитию, оперированию и обслуживанию программного обеспечения,%( а также исследованию этих подходов; то есть, приложение дисциплины инженерии к программному обеспечению. )%
Я попытался честно говоря сам сделать но как то не получилось у меня. Пока что не тот уровень знаний. Буду очень благодарен за помощь! И еще желательно было бы добавить небольшое описание к скрипту чтобы я потом смог в нем все таки разобраться и понять что к чему.
|
|
29.07.2013, 17:45
|
 |
Профессор
|
|
Регистрация: 04.12.2009
Сообщений: 579
|
|
|
бесплатно это вам не сделают. Одно дело помочь человеку (подсказать, исправить, направить в нужную сторону), а другое — сделать за него работу.
__________________
С моих слов записано верно.
|
|
29.07.2013, 18:26
|
 |
Профессор
|
|
Регистрация: 30.07.2011
Сообщений: 189
|
|
Вы просите готовый скрипт с нуля.
Это работа, и за нее обычно платят деньги.
Для таких сообщений предназначен раздел форума "Работа".
Если вы все же хотите, чтобы вам помогли - приложите какие-то усилия сами и задавайте вопросы по ходу дела. |
|
29.07.2013, 19:26
|
|
Новичок на форуме
|
|
Регистрация: 29.07.2013
Сообщений: 5
|
|
Ну срабатывать этот скрипт по идеи должен при загрузке страницы
<head>
<script>
function tags(){
var kw = "приложение";
Здесь код
}
</script>
</head>
<body onload="tags()">
</body>
Вот только как организовать этот код ума не приложу) Я мог бы взять и изменить допустим цвет всего абзаца с указанным ID или еще какие то свойства целого элемента. Но как взять и изменить отдельное слово ума не приложу, по сути мне только этот момент и нужно объяснить желательно на примере и с коментариями. У меня цель не просто скопировать готовый скрипт но еще и разобраться в нем что бы в будущем таких вопросов не возникало.
Вот объясните мне как взять и организовать поиск слова на ВСЕЙ странице и что бы после нахождения тут же обратиться к свойству данной строки и изменить ее цвет. Как я понял функция match() по идеи должна заниматься поиском совпадений в строке но как при этом цвет поменять? С этим я окончательно запутался.
Последний раз редактировалось archer, 29.07.2013 в 20:10.
|
|
29.07.2013, 22:16
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,123
|
|
|
Сообщение от archer
|
|
как взять и изменить отдельное слово
|
найти все текстовые ноды и проверить их содержимое на искомое разбить на три части 1текст_до 2искомое 3 текст_после - 1 часть вернуть текстовой ноде ,создать новую текстовую ноду и вторую часть добавить неё , саму ноду заключить в тег с определённым классом и добавить его после текстовой ноды old, создать новую текстовую ноду и третью часть добавить в неё и саму ноду добавить после нового тега, вот примерно так
Последний раз редактировалось рони, 29.07.2013 в 22:19.
|
|
29.07.2013, 22:26
|
|
Новичок на форуме
|
|
Регистрация: 29.07.2013
Сообщений: 5
|
|
Сообщение от рони
|
найти все текстовые ноды и проверить их содержимое на искомое разбить на три части 1текст_до 2искомое 3 текст_после - 1 часть вернуть текстовой ноде ,создать новую текстовую ноду и вторую часть добавить неё , саму ноду заключить в тег с определённым классом и добавить его после текстовой ноды old, создать новую текстовую ноду и третью часть добавить в неё и саму ноду добавить после нового тега, вот примерно так
|
А еще можно взять ноду текста определенного элемента определенной строки и записав ее в переменную применить к ней replace(); )
С этим я разобрался. Но вот по ВСЕЙ странице такой трюк провернуть будет напряжно особенно с учетом того что страница будет регулярно дополняться новой инфой. |
|
29.07.2013, 23:37
|
 |
Профессор
|
|
Регистрация: 22.03.2012
Сообщений: 3,744
|
|
можно попробовать отсюда
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<body>
Инженерия программного обеспечения (англ. Software Engineering) — приложение систематического, дисциплинного, измеримого подхода к развитию, оперированию и обслуживанию программного обеспечения, а также исследованию этих подходов; то есть, приложение дисциплины инженерии к программному обеспечению.
<div>
Инженерия программного обеспечения (англ. Software Engineering) — Приложение систематического, дисциплинного, измеримого подхода к развитию, оперированию и обслуживанию программного обеспечения, а также исследованию этих подходов; то есть, приложение дисциплины инженерии к программному обеспечению.
</div>
<script>
jQuery(function () {
var body = $("body");
var text = body.html().replace(/([Пп]риложение)/g, "<b>$1</b>");
body.html(text);
});
</script>
UPD: забыл сказать, конкретно при таком способе могут пострадать обработчики
Последний раз редактировалось bes, 29.07.2013 в 23:50.
|
|
30.07.2013, 01:12
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,123
|
|
|
Выделение слов на странице
... нагуглено и модернизировано ... Поиск в тексте...почти рабочий код)))
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script>
jQuery.fn.highlight = function (d, g) {
function f(a, c) {
if (3 == a.nodeType) {
var e = jQuery("<div><\/div>").text(a.data).html();
jQuery(a).replaceWith(e.replace(h, '<span class="' + b.className + '">$1<\/span>'))
} else if (1 == a.nodeType && a.childNodes && !/(script|style|img|input)/i.test(a.tagName) && a.className != b.className)
for (var e = a.childNodes.length, d; d = a.childNodes[--e];) f(d, c)
}
var b = {
split: " ",
className: "highlight",
caseSensitive: !1,
strictly: !1,
remove: !0
}, b = jQuery.extend(b, g);
b.remove && $("." + b.className).each(function () {
$(this).replaceWith($(this).text())
});
var c = b.strictly ? "" : "\\S*",
h = RegExp("(" + c + d.replace(RegExp(b.split, "g"), c + "|" + c) + c + ")", (b.caseSensitive ? "" : "i") + "g");
return this.each(function () {
f(this, d)
})
};
</script>
<style type="text/css">
span.highlight {color:red}
</style>
</head>
<body>
<div >
Вот только как организовать этот код ума не приложу)
Я мог бы взять и изменить допустим цвет всего абзаца
с указанным ID или еще какие то свойства целого
элемента. Но как взять и изменить отдельное слово
ума не приложу, по сути мне только этот момент и
нужно объяснить желательно на примере и с
коментариями. У меня цель не просто скопировать
готовый скрипт но еще и разобраться в нем что бы в
будущем таких вопросов не возникало. Вот объясните
мне как взять и организовать поиск слова на ВСЕЙ
странице и что бы после нахождения тут же
обратиться к свойству данной строки и изменить ее
цвет. Как я понял функция match() по идеи должна
заниматься поиском совпадений в строке но как при
этом цвет поменять? С этим я окончательно запутался.
</div>
<form>
<input id="pattern" name="" value="вот поиск слов"><label> слова через пробел</label><br>
<input id="right" name="" type="checkbox"><label>точное совпадение</label><br>
<input id="case" name="" type="checkbox"><label>зависит от регистра</label><br>
<input id="remove" name="" type="checkbox"><label>не убирать предыдущее выделение</label><br>
<input id="scan" name="" type="button" value="scan">
<script>
$('#scan').click(function () {
var settings = {};
var pattern = $('#pattern').val();
$("#right").prop("checked") && (settings.strictly = true);
$("#case").prop("checked") && (settings.caseSensitive = true);
$("#remove").prop("checked") && (settings.remove = false);
pattern && $("div").highlight(pattern, settings)
})
</script>
</form>
</body>
</html>
Последний раз редактировалось рони, 11.03.2023 в 11:25.
|
|
30.07.2013, 10:43
|
|
Новичок на форуме
|
|
Регистрация: 29.07.2013
Сообщений: 5
|
|
|
Сообщение от bes
|
можно попробовать отсюда
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<body>
Инженерия программного обеспечения (англ. Software Engineering) — приложение систематического, дисциплинного, измеримого подхода к развитию, оперированию и обслуживанию программного обеспечения, а также исследованию этих подходов; то есть, приложение дисциплины инженерии к программному обеспечению.
<div>
Инженерия программного обеспечения (англ. Software Engineering) — Приложение систематического, дисциплинного, измеримого подхода к развитию, оперированию и обслуживанию программного обеспечения, а также исследованию этих подходов; то есть, приложение дисциплины инженерии к программному обеспечению.
</div>
<script>
jQuery(function () {
var body = $("body");
var text = body.html().replace(/([Пп]риложение)/g, "<b>$1</b>");
body.html(text);
});
</script>
UPD: забыл сказать, конкретно при таком способе могут пострадать обработчики
|
Проверил рабочий вариант и в принципе вроде бы разобрался) записываем страницу в переменную потом ищем и заменяем слово и редактируем страницу) но вот в строчке
var text = body.html().replace(/([Пп]риложение)/g, "<b> $1</b>");
я не понял что значит это $1 ? Разве там не должно быть слово "приложение"?
|
|
30.07.2013, 11:23
|
 |
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,228
|
|
|
Сообщение от archer
|
|
я не понял что значит это $1 ?
|
Это значение "содержимого первой запоминаемой скобки"...
|
Сообщение от archer
|
|
Разве там не должно быть слово "приложение"?
|
Там будет "содержимое первой запомненой скобки"...
|
Цитата:
|
(x)
Находит x и запоминает. Это называется "запоминающие скобки". Например, /(foo)/ найдет и запомнит 'foo' в "foo bar." Найденная подстрока хранится в массиве-результате поиска или в предопределенных свойствах объекта RegExp: $1, ..., $9.Кроме того, скобки объединяют то, что в них находится, в единый элемент паттерна. Например, (abc)* - повторение abc 0 и более раз.
|
http://javascript.ru/regexp |
|
|
|
