We Keep Coding

Auto link a phrase on a page using javascript

The code below is meant to put links in words, but it works with only one word, I would like it to work with two words or more
Example:
"contact us": "www.example.com/contact.html",
"need help": "www.example.com/help.html",
"quick-thinking": "www.example.com/quick.html",
The code:
document.addEventListener("DOMContentLoaded", function(){
var links = {
"contact": "www.example.com/contact.html",
"help": "www.example.com/help.html",
}
var bodi = document.querySelectorAll("body *:not(script)");
for(var x=0; x<bodi.length; x++){
var html = bodi[x].innerHTML;
for(var i in links){
var re = new RegExp("([\\s| ]"+i+"(?:(?=[,<.\\s])))", "gi");
var matches = html.match(re);
if(matches){
matches = html.match(re)[0].trim();
html = html.replace(re, function(a){
return ' '+a.match(/[A-zÀ-ú]+/)[0].trim()+'';
});
}
}
bodi[x].innerHTML = html;
}
});
<div>
Please contact us if you need help
</div>
Update:
I'm not sure if this part is working, but I want you to not change words from script, img and class="thisclass" or .thisclass:
document.querySelectorAll("body *:not(script)")

You were just replacing it wrong.
a.match(/[A-zÀ-ú]...
needs to allow for a space character
a.match(/[A-zÀ-ú\s]...
See below:
document.addEventListener("DOMContentLoaded", function(){
var links = {
"contact us": "www.example.com/contact.html",
"need help": "www.example.com/help.html",
"hyphen-spaced-word" : "www.example.com/help.html"
}
var bodi = document.querySelectorAll("body *:not(script)");
for(var x=0; x<bodi.length; x++){
var html = bodi[x].innerHTML;
for(var i in links){
var re = new RegExp("([\\s| ]"+i+"(?:(?=[,<.\\s])))", "gi");
var matches = html.match(re);
//console.log(matches);
if(matches){
matches = html.match(re)[0].trim();
html = html.replace(re, function(a){
return ' '+a.match(/[A-zÀ-ú\s-]+/)[0].trim()+'';
});
}
}
bodi[x].innerHTML = html;
}
});
<div>
Please contact us if you need help. See hyphen-spaced-word.
</div>

javascript replace character with loop

This should be simple but I am not sure why it isn't working:
function kebabToSnake (str){
var string = "";
var chart = "";
for(i=0; i < str.lenght; i++){
if (str.charAt(i) == "-") {
chart = "_";
string = string + chart;
}
else {
chart = str.charAt(i);
string = string + chart;
}
}
return string
}
I know I could do it with str.replace(/-/g,"_") but I cannot see what's wrong with the above, besides being too long. Any help would be great.

You spelled "length" wrong. ( on line 4 )
It works after the spelling correction.
function kebabToSnake (str){
var string = "";
var chart = "";
for(i=0; i < str.length; i++){ //fixed spelling from 'str.lenght'
if (str.charAt(i) == "-") {
chart = "_";
string = string + chart;
}
else {
chart = str.charAt(i);
string = string + chart;
}
}
return string
}
var body = document.querySelector( 'body' ),
output = kebabToSnake( '-' ); //First test with '-' in conditional statement
body.innerHTML = output; //display to body
output = kebabToSnake( 'Another String' ); //Second test with random text triggering ELSE statement
body.innerHTML += '<br>' + output; //display to body

You can achieve this goal by using RegExp more concisely:
function kebabToSnake (str) {
return str.replace(/-/g, '_');
}

How to connect javascript var with text?

How to connect javascript var xx with /\ and \b/ ?
https://jsfiddle.net/6r4o5278/6/
<div onclick="check()">CLICK HERE</div>
<script>
function check() {
var str = "abcdefg";
var xx = "abc";
if (/\+xx+\b/.test(str))
{
alert("found");
} else
{
alert("not found");
}
}
</script>

What do you mean by 'connect javascript var xx with /\ and \b/'. Furthermore see:
http://www.w3schools.com/jsref/jsref_regexp_test.asp
// The string:
var str = "Hello world!";
// Look for "Hello"
var patt = /Hello/g;
var result = patt.test(str);
// Look for "W3Schools"
patt2 = /W3Schools/g;
result2 = patt2.test(str);

Declare your regex before testing.
....
var xx = /abc\b/;
if (xx.test(str)) {
...
Note that this will not match the string "abcdefg" because \b is a Word Boundary flag.

use this one surely work...:)
var test = '/\\' + xx + '\\b/';
console.log(test);
it will be /\abc\b/.

Try to construct the expression this way:
<script>
function check(value) {
var str = "abcdefg";
var re = new RegExp(value);
var found = str.match(re);
if (found) {
console.log(value + " - found");
}
else
{
console.log(value + " - not found");
}
}
check('xsxsd');
check('abc');
check('refer');
check('cde');
</script>

Javascript: Unable to load image resource on a div tag

Can anyone please give me an idea on how to view the actual image resource on a div tag:
This is the complete script:
var smileys = [];
smileys[":)"] = "happy.png";
smileys[":D"] = "laugh.png";
smileys[":3"] = "meow.png";
smileys[":{"] = "must.png";
smileys[":V"] = "pac.png";
smileys[":("] = "sad.png";
smileys[":O"] = "surprised.png";
smileys[":?"] = "wat.png";
function RegExpEscape(str) {
return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
}
function replaceEmoticons(str) {
for (var key in smileys) {
var re = new RegExp("(?:^|\\s)" + RegExpEscape(key) + "(?=$|\\s)", 'g');
var str2 = "<img src='images/smileys/" + smileys[key] + "'/>";
//alert(re);
//alert(str2);
var inputName = document.getElementById("input");
alert(inputName);
str = str.html().replace(re, str2);
}
return (str);
}
var delay = (function() {
var timer = 0;
return function(callback, ms) {
clearTimeout(timer);
timer = setTimeout(callback, ms);
};
})();
update();
function update() {
$('#result').text(replaceEmoticons($('#input').val()));
}
$('#input').keyup(function() {
delay(update, 250);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Input :</h4>
<textarea id="input">
Hello how are you all doing today? :)
</textarea>
<hr>
<h4>Result :</h4>
<div id="result">
</div>
When I inspect element no error was found on the console!
Kindly Assist!

Note that the javascript code is executing before the DOM is loaded. When you load page, after loading the code is executing and #input doesn't exist yet. Put it in a $(document).ready, or in a onload event.
$(document).ready(function() {
//your stuff
});
EDIT
See that fiddle: https://jsfiddle.net/aoaugpaf/

In this function:
function replaceEmoticons(str) {
for (var key in smileys) {
var re = new RegExp("(?:^|\\s)" + RegExpEscape(key) + "(?=$|\\s)", 'g');
var str2 = "<img src='images/smileys/" + smileys[key] + "'/>";
//alert(re);
//alert(str2);
var inputName = document.getElementById("input");
alert(inputName);
str = str.html().replace(re, str2);
}
return (str);
}
str doesn't have an html() method since it's the value of an input as you wrote here:
$('#result').text(replaceEmoticons($('#input').val()));
Simply remove the html() method and everything will work.
Here's a fiddle I've made for you.

Because $().val() returns String and string has no method .html()
Edit function replaceEmoticons:
str = str.replace(re, str2);
It works: http://jsfiddle.net/au419fkh/

Limiting length of each word in a string

Is there a way to limit the length of each word in a string?
For example:
Loop through each word in a string
If a word is longer than X amount of characters, display a pop up message and do not submit the form.
Edit: My final code:
$("#comment-form").submit(function(event) {
var str = $("#comment-box").val(), limit = 135;
var wordList = str.split(' ');
$(wordList).each(function(i, word) {
if(word.length > limit) {
alert("Your comment has a string with more than " + limit + " characters. Please shorten it.");
event.preventDefault();
}
});
});

Try this:
var str = "This is the test string that contains some long words";
var wordList = str.split(' ');
var limit = 4;
$(wordList).each(function(i, word){
if(word.length >= limit){
alert(word);
}
});

You can use the following function
<script>
var string = "Please be sure question to answer the question";
function checkWordLength(string)
{
var string_array = string.split(" ");
for(var i=0; i<string_array.length; i++)
{
var word = string_array[i];
var word_length = word.length;
if(word_length>6) return false;
}
}
checkWordLength(string);
</script>

jsFiddle
function CheckString(string, character_limit)
{
var word = /\w+/igm;
var match;
while((match = word.exec(string)) !== null) {
if(match[0].length > character_limit)
{
alert(match[0]);
return false;
}
}
return true;
}
var character_limit = 5;
var string = 'this is a string of words and stuff even';
CheckString(string, character_limit);
This example uses regular expressions when it returns false make sure to either return false from the onSubmit method of your form.